import React, { PureComponent, Fragment } from "react"
import {
  Table,
  Input,
  InputNumber,
  Popconfirm,
  Form,
  Button,
  Divider,
  Tooltip,
  Select
} from "antd"
import isEqual from "lodash/isEqual"
import { connect } from "dva"
import { formatMessage } from "umi/locale"

const FormItem = Form.Item
const EditableContext = React.createContext()

const EditableRow = ({ form, index, ...props }) => (
  <EditableContext.Provider value={form}>
    <tr {...props} />
  </EditableContext.Provider>
)

const EditableFormRow = Form.create()(EditableRow)

class EditableCell extends React.Component {
  getInput = () => {
    if (this.props.inputType == "select") {
      if (this.props.dataIndex === "operation_mode") {
        return (
          <Select>
            <Select.Option value="Eap模式">Eap模式 </Select.Option>
            <Select.Option value="本地模式">本地模式</Select.Option>
          </Select>
        )
      } else if (this.props.dataIndex === "delete_data_auto") {
        return (
          <Select>
            <Select.Option value="否">否</Select.Option>
            <Select.Option value="是">是</Select.Option>
          </Select>
        )
      }
    } else if (this.props.inputType === "number") {
      return <InputNumber />
    }
    return <Input />
  }

  render() {
    const {
      editing,
      dataIndex,
      title,
      inputType,
      record,
      index,
      max,
      min,
      step,
      ...restProps
    } = this.props
    return (
      <EditableContext.Consumer>
        {(form) => {
          const { getFieldDecorator } = form
          return (
            <td {...restProps}>
              {editing ? (
                <FormItem style={{ margin: 0 }}>
                  {getFieldDecorator(dataIndex, {
                    rules: [
                      {
                        required: true,
                        message:
                          formatMessage({ id: "app.tools.pleaseInput" }) +
                          `${title}!`
                      }
                    ],
                    initialValue: record[dataIndex]
                  })(this.getInput())}
                </FormItem>
              ) : (
                restProps.children
              )}
            </td>
          )
        }}
      </EditableContext.Consumer>
    )
  }
}

@connect(({ es, hd }) => ({ es, hd }))
class EapParamsForm extends React.Component {
  constructor(props) {
    super(props)
    this.state = { editingKey: "", serverThresData: {} }
    this.columns = [
      {
        title: "pc_data_craft",
        dataIndex: "pc_data_craft",
        editable: true,
        width: "10%",
        inputType: "number",
        key: "1"
      },
      {
        title: "pc_data_manual",
        dataIndex: "pc_data_manual",
        editable: true,
        width: "10%",
        inputType: "number",
        key: "2"
      },
      {
        title: "pc_data_status",
        dataIndex: "pc_data_status",
        editable: true,
        width: "10%",
        inputType: "number",
        key: "3"
      },
      {
        title: "pc_data_count",
        dataIndex: "pc_data_count",
        editable: true,
        width: "10%",
        inputType: "number",
        key: "4"
      },
      {
        title: "pc_signal_status",
        dataIndex: "pc_signal_status",
        editable: true,
        width: "10%",
        inputType: "number",
        key: "5"
      },
      {
        title: "eap_signal_status",
        dataIndex: "eap_signal_status",
        editable: true,
        width: "10%",
        inputType: "number",
        key: "6"
      },
      {
        title: "eap_material_data",
        dataIndex: "eap_material_data",
        editable: true,
        width: "10%",
        inputType: "number",
        key: "7"
      },
      {
        title: "操作模式",
        dataIndex: "operation_mode",
        editable: true,
        width: "10%",
        inputType: "select",
        key: "8"
      },
      {
        title: "插入数据前清空表",
        dataIndex: "delete_data_auto",
        editable: true,
        width: "10%",
        inputType: "select",
        key: "9"
      },
      {
        title: "操作",
        key: "action",
        width: "10%",
        render: (text, record) => {
          const editable = this.isEditing(record)
          return (
            <div>
              {editable ? (
                <span>
                  <EditableContext.Consumer>
                    {(form) => (
                      <a
                        href="javascript:;"
                        onClick={() => this.save(form, record.key)}
                        style={{ marginRight: 8 }}
                      >
                        {formatMessage({ id: "app.tools.save" })}
                      </a>
                    )}
                  </EditableContext.Consumer>
                  <Popconfirm
                    title="Sure to cancel?"
                    onConfirm={() => this.cancel(record.key)}
                  >
                    <a>{formatMessage({ id: "app.tools.cancel" })}</a>
                  </Popconfirm>
                </span>
              ) : (
                <span>
                  <a onClick={() => this.edit(record.key)}>
                    {formatMessage({ id: "app.tools.edit" })}
                  </a>
                </span>
              )}
            </div>
          )
        }
      }
    ]
  }
  isEditing = (record) => record.key === this.state.editingKey

  cancel = () => {
    this.setState({ editingKey: "" })
    const { dispatch } = this.props
    dispatch({
      type: "es/getEapParams"
    })
  }
  save(form, key) {
    const { dispatch } = this.props
    form.validateFields((error, row) => {
      console.log("row", row)
      if (error) {
        return
      }
      const newData = { ...row, key: "1" }
      this.edit("")
      dispatch({
        type: "es/saveEapParams",
        payload: newData
      })
    })
  }

  edit(key) {
    this.setState({ editingKey: key })
  }

  render() {
    const { serverEapParams } = this.props.es
    const components = {
      body: {
        row: EditableFormRow,
        cell: EditableCell
      }
    }

    const columns = this.columns.map((col) => {
      if (!col.editable) {
        return col
      }
      return {
        ...col,
        onCell: (record) => ({
          record,
          inputType: col.inputType,
          dataIndex: col.dataIndex,
          max: col.max,
          min: col.min,
          step: col.step,
          title: col.title,
          editing: this.isEditing(record)
        })
      }
    })

    return (
      <Fragment>
        <Table
          bordered
          components={components}
          dataSource={serverEapParams}
          columns={columns}
          rowClassName="editable-row"
          size={"small"}
          rowKey={(record, index) => index}
          pagination={false}
        />
      </Fragment>
    )
  }
}

export default EapParamsForm
